<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动文字绕图</title>
	<style type="text/css">
		.com{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin: 100px auto 0;
		}

		.pic{
			width: 100px;
			height: 100px;
			background-color: gold;
			float: left;
		}

		.duanluo{
			background-color: green;
			width: 400px;
			color: white;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="pic"></div>

		<div class="duanluo">文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。</div>
	</div>
</body>
</html>